<template>
  <div class="calendar-view">
    <el-card>
      <template #header>
        <span>会议日历</span>
      </template>
      <el-calendar v-model="selectedDate">
        <template #dateCell="{ data }">
          <div class="date-cell">
            <span :class="{ today: isToday(data.day) }">{{ data.day.split('-')[2] }}</span>
            <div v-if="getBookings(data.day).length" class="booking-dot"></div>
          </div>
        </template>
      </el-calendar>
      <div class="booking-list">
        <h4>当日预约：</h4>
        <el-timeline>
          <el-timeline-item
              v-for="item in getBookings(selectedDate)"
              :key="item.id"
              :timestamp="item.startTime + ' ~ ' + item.endTime"
              :color="item.status === 'confirmed' ? '#67C23A' : '#E6A23C'"
          >
            <strong>{{ item.roomName }}</strong> - {{ item.purpose }}
          </el-timeline-item>
          <el-timeline-item v-if="!getBookings(selectedDate).length">
            <span style="color:#999">暂无预约</span>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'

const selectedDate = ref(dayjs().format('YYYY-MM-DD'))

// 示例预约数据
const bookings = ref([
  { id: 1, roomName: '会议室A', startTime: '09:00', endTime: '10:00', date: dayjs().format('YYYY-MM-DD'), purpose: '项目讨论', status: 'confirmed' },
  { id: 2, roomName: '会议室B', startTime: '14:00', endTime: '15:00', date: dayjs().format('YYYY-MM-DD'), purpose: '客户会议', status: 'pending' },
  { id: 3, roomName: '会议室A', startTime: '11:00', endTime: '12:00', date: dayjs().add(1, 'day').format('YYYY-MM-DD'), purpose: '团队例会', status: 'confirmed' },
])

const getBookings = (date: string) => {
  return bookings.value.filter(item => item.date === date)
}

const isToday = (date: string) => {
  return date === dayjs().format('YYYY-MM-DD')
}
</script>

<style scoped lang="scss">
.calendar-view {
  padding: 20px;
  .booking-list {
    margin-top: 30px;
  }
  .date-cell {
    position: relative;
    text-align: center;
    .today {
      color: #409EFF;
      font-weight: bold;
    }
    .booking-dot {
      width: 6px;
      height: 6px;
      background: #67C23A;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 4px;
    }
  }
}
</style>